<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css3逐帧动画</title>
        <style>
        @keyframes run{
            0%{
                background-position: 0 0;
            }
            8.333%{
                background-position: -140px 0;
            }
            16.666%{
                background-position: -280px 0 ;
            }
            25.0%{
                background-position: -420px 0 ;
            }
            33.333%{
                background-position: -560px 0 ;
            }
            41.666%{
                background-position: -700px 0 ;
            }
            50.0%{
                background-position: -840px 0 ;
            }
            58.333%{
                background-position: -980px 0 ;
            }
            66.666%{
                background-position: -1120px 0 ;
            }
            75.0%{
                background-position: -1260px 0 ;
            }
            83.333%{
                background-position: -1400px 0 ;
            }
            91.666%{
                background-position: -1540px 0 ;
            }
            100%{
                background-position: 0 0 ;
            }
        }
        @-webkit-keyframes run{
            0%{
                background-position: 0 0;
            }
            8.333%{
                background-position: -140px 0;
            }
            16.666%{
                background-position: -280px 0 ;
            }
            25.0%{
                background-position: -420px 0 ;
            }
            33.333%{
                background-position: -560px 0 ;
            }
            41.666%{
                background-position: -700px 0 ;
            }
            50.0%{
                background-position: -840px 0 ;
            }
            58.333%{
                background-position: -980px 0 ;
            }
            66.666%{
                background-position: -1120px 0 ;
            }
            75.0%{
                background-position: -1260px 0 ;
            }
            83.333%{
                background-position: -1400px 0 ;
            }
            91.666%{
                background-position: -1540px 0 ;
            }
            100%{
                background-position: 0 0 ;
            }
        }
        div{
            width:140px;
            height:140px;
            background: url('http://images2015.cnblogs.com/blog/754767/201606/754767-20160601000042992-1734972084.png') ;
            animation:run 1s steps(1, start) infinite;
                -webkit-animation:run 1s steps(1, start) infinite;
        }
        </style>
    </head>
    <body>
        <div></div>
    </body>